<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta  name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>vui</title>
<link href="../dist/base.css" rel="stylesheet">
<link href="../dist/vui.min.css" rel="stylesheet">
<script src="../dist/vue.js"></script>
<script src="../dist/vui.min.js"></script>
</head>
<body>
<div id="app">
<button type="button" class="vue-btn vue-btn-default" @click="showAlert">确认弹出框</button>

<Alert 
:visible="alert.visible"
:title="alert.title"
:transition="alert.transition"
:content="alert.content"
:on-ok="alert.onOk"
:class-name="alert.className"
></Alert>
</div>

<script>
var Alert = vui.MessageAlert
var app = new Vue({
    el : '#app',
    components:{
 		Alert
 	},
 	data:function(){
 		var self=this;
 		return{
	 		"alert":{
	 			visible:false,
	 			title:"AlertTitle",
	 			transition:"vue-message-center",
	 			content:"这是一个Alert弹出框。",
	 			onOk:function(ev){
	 				self.alert.visible=false;
		 		}
	 		}
 		}
 	},
 	methods:{
 		showAlert:function(){
 			this.alert.visible=true;
 		}
 	}
})
</script>
</body>
</html>